class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            id: 0,
            pagesize: 15,
            start: 1,
            to: '',
            counts: [],
            pagestart: 0,
            orders: 1,
            name: '',
            keyword: '',
            worktype: 0,
            worksubtype: 0,
            worktypehtml: [],
            worksubtypehtml: [],
            reason: '',
            contents: '',
            // cid:1,
        };
    }

    formatlist(list) {
        var listitem = [], wulist = []
        if (list.length > 0) {
            list.forEach((x, i) => {
                let state = x.state == 'APPLYING' ? '审核中' : x.state == 'SUCCESS' ? '已通过' : '未通过'
                listitem.push(
                    <tr key={i}>
                        <td>{x.title}</td>
                        <td>{x.worksubtypename}{x.recruitsnum}人</td>
                        {/* <td>{x.province}{x.city}{x.district}</td> */}
                        <td><p>{x.contacts}</p><p>{x.phone}</p></td>
                        <td>{x.salary}</td>
                        <td>{x.recruitstate == "RECRUITING" ? "招聘中" : x.recruitstate == "RECRUITFULL" ? "已招满" : "未知"}</td>
                        <td>{x.isurgent == '1' ? '是' : '否'}</td>
                        <td> <span style={{ color: state == '已通过' ? '#669900' : state == '未通过' ? '#f00' : '#000' }}>{state}</span></td>
                        <td className="operatebox">
                            <div className='operate' id={"ope" + x.id}>

                                <div style={{ display: x.state == 'APPLYING' ? '' : 'none' }}  >
                                    <p className='edit' onClick={this.confirmapply.bind(this, x.id)}>通过</p>
                                </div>
                                <div style={{ display: x.state == 'APPLYING' ? '' : 'none' }} >
                                    <p className='edit colred' onClick={this.cancal.bind(this, x.id)} data-toggle="modal" data-target="#modalOne" >拒绝</p>
                                </div>
                                <div style={{ display: x.state == 'SUCCESS' && x.isurgent != '1' ? '' : 'none' }}  >
                                    <p className='edit' onClick={this.urgent.bind(this, x.id)}>修改成急聘</p>
                                </div>
                                <div>
                                    <img src="./src/todetails.png" />
                                    <p className='edit' onClick={this.detail.bind(this, x.id)}>详情</p>
                                </div>
                                <div>
                                    <img src="./src/del.png" />
                                    <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                </div>
                            </div>
                        </td>
                    </tr>
                )
            });
        } else {
            wulist.push(
                <p className="wulist">暂无数据</p>
            )
        }
        this.setState({ listitem, list, originallist: list, wulist })
    }
    // 编辑
    edit(e) {
        var { list } = this.state, item = [];
        list.forEach(x => {
            if (x.id == e) {
                this.setState({ id: e, name: x.name, })
            }
        });
        // console.log(item, 'item')
    }

    detail(e) {
        window.location.href = './recruitdetail.html?id=' + e
    }


    // 拒绝
    cancal(e) {
        console.log(e, 'cancel')
        this.setState({ refuseid: e, })
    }
    reasonsubmit() {
        let { refuseid, reason, } = this.state, that = this;
        if (reason == '') {
            alert('请输入原因')
            return;
        }

        this.setState({ showloading: 'ON' })
        let data = { id: refuseid, reason, }
        Recruitcheck(data, res => {
            if (res.issuccess == 1) {
                alert('操作成功')
                that.freshlist()
            } else {
                this.setState({ showloading: '' })
                alert(res.msg)
            }
        })
        console.log(data, 'reasonsubmit');

    }
    // 通过
    confirmapply(e) {
        this.setState({ confirmid: e, contents: '确定要通过审核吗？', setjk: 'confirm', }, () => {
            $('#myModal').modal('toggle');
        })
    }
    //急聘
    urgent(e) {
        this.setState({ urgentid: e, contents: '确定要修改成急聘吗？', setjk: 'edit', }, () => {
            $('#myModal').modal('toggle');
        })
    }
    // 删除
    del(e) {
        this.setState({ delid: e, contents: '确定要删除吗？', setjk: 'del' }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        this.setState({ showloading: 'ON' })
        let { setjk } = this.state, that = this
        if (setjk == 'del') {
            let { delid } = that.state
            Recruitdel(delid, res => {
                if (res.issuccess == 1) {
                    that.setState({ showloading: '' })
                    alert('删除成功')
                    $('#myModal').modal('toggle');
                    that.freshlist()
                } else {
                    $('#myModal').modal('toggle');
                    alert(res.msg);
                }
            })
        } else if (setjk == 'confirm') {
            let { confirmid, } = that.state
            Recruitcheck({ id: confirmid, }, res => {
                if (res.issuccess == 1) {
                    alert('操作成功')
                    $('#myModal').modal('toggle');
                    that.freshlist()
                } else {
                    that.setState({ showloading: '', })
                    $('#myModal').modal('toggle');
                    alert(res.msg)
                }
            })

        } else if (setjk == 'edit') {
            let { urgentid, } = that.state
            Recruitseturgent(urgentid, res => {
                if (res.issuccess == 1) {
                    alert('设置成功')
                    $('#myModal').modal('toggle');
                    that.freshlist()
                } else {
                    that.setState({ showloading: '', })
                    $('#myModal').modal('toggle');
                    alert(res.msg)
                }
            })

        }
    }

    setpager(pagecount, start) {
        let counts = [];
        for (let i = 0; i < pagecount; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        let { start, pagesize } = this.state
        start = (e * pagesize) + 1
        this.setState({ pagestart: e, start }, () => {
            this.freshlist()
        })
    }
    setpage(e) {
        let { pagesize, start } = this.state
        pagesize = parseInt(e)
        start = 1
        this.setState({ pagesize, start }, () => {
            this.freshlist()
        })
    }


    componentDidMount() {
        let that = this, worktypehtml = [];
        this.setState({ showloading: 'ON', }, () => {
            Mechanicstypegetlist(res => {
                if (res.issuccess == 1) {
                    worktypehtml.push(
                        <option value="0">请选择</option>
                    )
                    res.list.forEach((x, i) => {
                        worktypehtml.push(
                            <option key={i} value={x.id}>{x.name} </option>
                        )
                    })
                    that.setState({ worktypehtml, }, () => {
                        that.freshlist()
                    })

                } else {
                    that.setState({ showloading: '' })
                    alert("加载失败，请刷新")
                }
            })
        })

    }

    freshlist() {
        let { pagesize, start, keyword, worktype, worksubtype, } = this.state;
        Recruitgetlist({ pagesize, start, keyword, worktype, worksubtype, }, res => {
            this.setState({ showloading: '' })
            if (res.issuccess == 1) {
                if (start == 1) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, total: res.total })
                }
                this.formatlist(res.list);
            }
        })

    }


    inputchange(prop, e) {
        // let { target } = this.state;
        // target[prop] = e.target.value
        // this.setState({ target })
        this.setState({ [prop]: e.target.value })
    }
    search() {
        let { worktype, worksubtype, keyword } = this.state
        if (keyword.length == 0 && worktype < 1) return;
        this.setState({ showloading: 'ON', start: 1 }, () => {
            this.freshlist();

        })
    }
    reset() {
        this.setState({ keyword: '', showloading: 'ON', start: 1, worktype: 0, worksubtype: 0, worksubtypehtml: [], }, () => {
            this.freshlist();
        });
    }

    onstatechange(prop, e) {
        let estate = e.target.value, that = this
        if (prop == 'worktype') {
            if (estate > 0) {
                let worksubtypehtml = []
                worksubtypehtml.push(
                    <option value="0">请选择</option>
                )
                Mechanicstypegetlistbycid(estate, res => {
                    if (res.issuccess == 1) {
                        if (res.list.length > 0) {
                            res.list.forEach((x, i) => {
                                worksubtypehtml.push(
                                    <option key={i} value={x.id}>{x.name}</option>
                                )
                            })
                        }
                        that.setState({ worksubtypehtml, worksubtype: 0 })

                    } else {
                        alert('获取二级工种列表失败，请重新选择一级工种')
                    }
                })
            } else {
                that.setState({ worksubtypehtml: [], worksubtype: 0 })
            }
        }
        this.setState({ [prop]: estate })
    }

    add() {
        this.setState({ name: '', id: 0, })
        // $('#modalOne').modal('toggle');
    }

    render() {
        let { listitem, contents, keyword, worktype, worksubtype, worktypehtml, worksubtypehtml, reason } = this.state;

        return (
            <div className="breadLinebox">
                <Loading hidden={this.state.showloading != 'ON'} />
                <Modal content={contents} click={this.confirmdel.bind(this)} />
                {/* <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} /> */}
                <div className="modal fade" id="modalOne" >
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="input-group-addon">拒绝理由</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'reason')} value={reason} type="text" placeholder='请输入拒绝理由' className="input" />
                                </div>

                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.reasonsubmit.bind(this)} data-dismiss="modal" className="submitmod">提交</button>
                            </div>

                        </div>
                    </div>
                </div>
                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="img">
                            <img src='./src/lm_order1.png' />
                            招工管理
                        </div>
                    </div>
                    <div className="content">
                        {/* <div style={{display:clicknew?"":"none"}} id="div"> */}

                        <div className="tabletit" >
                            <div className="search">
                                <input onChange={this.inputchange.bind(this, 'keyword')} value={keyword} type="text" placeholder='请输入标题、联系人姓名或电话' className />
                                <div className="flexbox">
                                    <span>工种：</span>
                                    <div className="mallradiobox" >
                                        <select value={worktype} onChange={this.onstatechange.bind(this, 'worktype')} className="form-control select">
                                            {worktypehtml}
                                        </select>
                                        <select style={{ display: worktype > 0 ? "" : "none" }} value={worksubtype} onChange={this.inputchange.bind(this, 'worksubtype')} className="form-control select">
                                            {worksubtypehtml}
                                        </select>

                                    </div>
                                </div>
                                <p onClick={this.search.bind(this)}>查询</p>
                                <p onClick={this.reset.bind(this)}>返回</p>
                            </div>
                        </div>
                        <table className="tab">
                            <thead>
                                <tr>
                                    <th>标题</th>
                                    <th>工种/人数</th>
                                    {/* <th>项目地址</th> */}
                                    <th>联系人/电话</th>
                                    <th>薪资</th>
                                    <th>招聘状态</th>
                                    <th>是否急聘</th>
                                    <th>状态</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        {this.state.wulist}

                        <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={this.state.counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={this.state.pagestart} />
                        </div>
                    </div>
                </div>
            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='recruit' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)